<template>
  <view class="tn-show-tips">
    <view v-if="showTips" class="box waves" :style="'top:'+(custom ? navbarHeight : 0)+'px'" id="add-tips" :animation="animationData">
      <view class='arrow' :style="'margin-right:' + arrowR + 'px;'"></view>
      <view class='body' @click='hidden' :style="'margin-right:' + bodyR + 'px;'">
        <image :src="logo" class="logo"></image>
        <view class="tips">{{ tips }}</view>
      </view>
    </view>
  </view>
</template>

<script>
  const SHOW_TIPS_STORAGE_KEY_PREFIX = 'tn_show_tips_'
  export default {
    name: 'TnShowTips',
    props: {
      tips: {
        type: String,
        default: '添加到我的小程序 , 以后使用更方便'
      },
      duration: {
        type: Number,
        default: 8
      },
      delay: {
        type: Number,
        default: 1
      },
      logo: {
        type: String,
        default: 'https://z3.ax1x.com/2021/07/06/RoKw7Q.jpg'
      },
      custom: {
        type: Boolean,
        default: false
      },
      shareFriend: {
        type: Boolean,
        default: false
      },
      keyName: {
        type: String,
        default: ''
      }
    },
    mounted() {
      // console.log('show-tips mounted');
      // 判断是否为第二次进入
      if (uni.getStorageSync(this.getStorageKey())) return
      let rect = uni.getMenuButtonBoundingClientRect() ? uni.getMenuButtonBoundingClientRect() : null
      let { screenWidth } = uni.getSystemInfoSync()
      this.navbarHeight = (rect.bottom + 5) || 60
      if (!this.shareFriend) {
        this.arrowR = (screenWidth - rect.right + rect.width*3/4 - 5) || 70
        this.bodyR = (screenWidth - rect.right) || 50
      } else {
        this.arrowR = (screenWidth - rect.right + rect.width/4 - 8) || 23
        this.bodyR = (screenWidth - rect.right - 8) || 2
      }
      // console.log(this.arrowR, this.bodyR);
      
      this.startTimer = setTimeout(() => {
        this.showTips = true
      }, this.delay * 1000)
      this.duraTimer = setTimeout(() => {
        this.shrink()
        uni.setStorageSync(this.getStorageKey(), true)
      }, (this.duration + this.delay) * 1000)
    },
    destroyed() {
      // console.log('show-tips destoryed');
      this.clearAllTimer()
    },
    data() {
      return {
        navbarHeight: 60,
        arrowR: 70,
        bodyR: 50,
        startTimer: null,
        duraTimer: null,
        animationData: null,
        showTips: false
      }
    },
    methods: {
      hidden() {
        uni.setStorageSync(this.getStorageKey(), true)
        this.shrink()
      },
      shrink() {
        const animation = uni.createAnimation({
          duration: 500,
          timingFunction: 'ease',
          transformOrigin: `calc(600rpx - ${this.arrowR}px) 1%`
        })
        animation.scale(1,1).step()
        animation.scale(0,0).step()
        this.animationData = animation.export()
        
        
        setTimeout(() => {
          this.showTips = false
          this.clearAllTimer()
        }, 1000)
      },
      getStorageKey() {
        return SHOW_TIPS_STORAGE_KEY_PREFIX + this.keyName
      },
      clearAllTimer() {
        if (this.startTimer) clearTimeout(this.startTimer)
        if (this.duraTimer) clearTimeout(this.duraTimer)
      }
    }
  }
</script>

<style lang="scss" scoped>
.tn-show-tips {
  .box {
    position: fixed;
    right: 0;
    z-index: 999;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    flex-direction: column;
    width: 600rpx;
  }
  
  .arrow {
    width: 0;
    height: 0;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent rgba(0, 0, 0, 0.75) transparent;
  }
  
  .body {
    background-color: rgba(0, 0, 0, 0.75);
    border-radius: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 46px;
    padding: 10px 20px 10px 10px;
  }
  
  .tips {
    flex: 1;
    color: #fff;
    font-size: 13px;
    // font-weight: 700;
  }
  
  .logo {
    height: 32px;
    width: 32px;
    border-radius: 100px;
    margin-right: 10px;
  }
  
  
  
  .waves {
    z-index: 9999;
  }
  
  .wave, .waves:before, .waves:after {
    position: absolute;
    background: rgba(233,233,233,0.8);
    margin-left: -48px;
    margin-top: -50px;
    width: 50px;
    height: 50px;
    content: "";
    display: block;
    border-radius: 50%;
    -webkit-backface-visibility: hidden;
  }
  
  .waves:before {
    animation: wave-animate 3s infinite ease-out;
  }
  
  .waves:after {
    opacity: 0;
    animation: wave-animate 3s 1.5s infinite ease-out;
  }
  
  @keyframes wave-animate {
    0% {
      transform: scale(0);
      opacity: 1;
      transform-origin: center;
    }
    100% {
      transform: scale(3);
      opacity: 0;
      transform-origin: center;
    }
  }
}
</style>
